<template>
  <el-card>
    <template #header>
      <div class="oneLine" @click="rowClick()">
        <span class="el-card-title"
          >{{ params?.title || "默认传参标题" }}
          <svg-icon icon-class="more" size="12"
        /></span>
        <i-ep-close
          v-show="!panelSetIcon"
          class="el-icon-close"
          style="float: right; padding: 3px 0"
          @click="deletePanelItem"
        />
      </div>
    </template>
    <el-table
      ref="dataTableRef"
      :data="tableData"
      v-loading="loading"
      highlight-current-row
      :border="false"
      height="calc(100% + 5px)"
      @row-click="rowClick"
    >
      <el-table-column
        :prop="item.prop"
        :label="item.label"
        v-for="item in tableHeader"
        :key="item.prop"
        :width="item.width"
        :align="item.align"
        show-overflow-tooltip
      />
    </el-table>
  </el-card>
</template>

<script lang="ts" setup>
import request from "@/utils/request";
import router from "@/router";
const emit = defineEmits(["deletePanelItemEvent"]);

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { panelSetIcon, id, params } = toRefs(props);

function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}

const tableData = ref([]);
const loading = ref(false);

async function getTableList() {
  loading.value = true;
  const { data } = await request({
    url: "/system/oakeyworkinfo/performance",
    method: "post",
    data: {
      current: 1,
      size: 6,
      data: {},
    },
  }).finally(() => {
    loading.value = false;
  });
  tableData.value = data;
}

function rowClick(row?) {
  if (row) {
    // router.push({
    //   name: "KEYWORKWORKEXECUTIONSETTING",
    //   query: { id: row.id },
    // });
  } else {
    // router.push({
    //   name: "KEYWORKWORKEXECUTION",
    // });
  }
}

onMounted(() => {
  getTableList();
});

const tableHeader = [
  {
    prop: "workName",
    label: "工作名称",
    align: "left",
  },
  {
    prop: "organizationName",
    label: "所属单位",
    align: "left",
  },
  {
    prop: "createTime",
    label: "创建时间",
    align: "left",
  },
];
</script>

<style lang="scss" scoped>
.el-card {
  height: 100%;
}
.el-card-title {
  font-weight: bold;
  font-size: 14px;
}

:deep(.el-card__header) {
  border-bottom: none;
  font-size: 14px;
  padding: 12px 20px;
  margin: 5px;
  border-radius: 6px;
  font-weight: 600;
  background: rgba(212, 219, 249, 0.3);
  cursor: pointer;
  color: rgba(107, 104, 254, 0.7);
}
:deep(.el-card__body) {
  padding: 0px 10px !important;
  height: calc(100% - 56px);
  .el-table thead tr th {
    color: #777;
    border-bottom: none;
    font-size: 13px;
    padding: 14px 0 10px 0;
  }
  .el-table .cell.el-tooltip {
    color: #999;
    font-size: 13px;
    cursor: pointer;
  }
  .el-table .el-table__cell {
    padding: 9px 0 !important;
  }
}
</style>
